﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script id="loadfromsina"></script>
    <style type="text/css">
a{color:#0088cc;text-decoration:none;}
a:hover,a:focus{color:#005580;text-decoration:underline;}
#customers
  {
  font-family:"微软雅黑;";
  width:240;
  border-collapse:collapse;
  }

#customers td, #customers th 
  {
  font-size:0.9em;
  border:1px solid #0088cc;
  padding:3px 3px 3px 3px;
    text-align: right;
  }

#customers th 
  {
  font-size:0.9em;
  text-align:center;
  padding-top:3px;
  padding-bottom:3px;
   background-color: #0088cc;
  color:#ffffff;
  }

 #customers tr.alt td 
  {
  color:#000000;
  
  background-color:#EAF2D3;
  }

  #customers td.code 
  {
      text-align: left;
      font-weight: bold;
  }

    </style>
</head>

    <body>
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>



        <table id="customers">
            <tr>
                <th>代码</th>
                <th>当前</th>
                <th>涨跌</th>
                <th>买入</th>
                <th>卖一</th>
                <th>卖二</th>
                <th>52周</th>
            </tr>
        </table>

    </body>
    
    <script type="text/javascript">
        //此例介绍使用AJAX调取新浪的行情接口，显示自己关心的股票行情，并定时刷新
        //A股接口是http://hq.sinajs.cn/list=sh_600100,sh_600001
        //美股接口是http://hq.sinajs.cn/list=gb_bidu,gb_fb
        //接口返回js变量数组，每个股票数据一个js变量，JS可直接使用，或者自己按字符串处理，本例用js变量方式，js变量就是类似hq_str_sh_600100或 hq_str_gb_bidu
        
        //数组就是我们需要重点关注的股票，以及它们的买入目标价，卖出目标价1，卖出目标价2 ，股票代码用小写，否则变量名都不认了
        var arr = ['scty,0,0,0', 'kong,0,0,0', 'tsla,0,0,0', 'qihu,0,0,0', 'ccih,0,0,0', 'vnet,0,0,0', 'himx,0,0,0', 'irbt,0,0,0', 'rgdo,0,0,0', 'ctrp,0,0,0', 'fmi,0,0,0', 'gtat,0,0,0', 'orb,0,0,0', 'amcn,0,0,0', 'data,0,0,0', 'bidu,0,0,0'];

        var _webInfPath = 'http://hq.sinajs.cn/list=';

        //默认ajax是带自动生成的随机数去请求，例如http://hq.sinajs.cn/list=gb_bidu_?324343 ,但这样接口异常，所以要去掉随机数请求，就设置cache为true
        $.ajaxSetup({
            cache: true
        });
        
        
        $(document).ready(function () {
            inittable();
            show();
            //以后每间隔5秒刷新一次行情更新
            setInterval("show()", 5000);
        });
         
        //刷新行情并显示在对应单元格里 
        function show() {
            //动态载入api的js,得到数据后直接使用返回的js变量
            $.getScript(_webInfPath, function () {       
                var acode = "";
                var astock = "";
                var atitle = "";
                //遍历股票数组，根据得到返回动态hq_str_gb_xxx 变量结果，取对应内容赋值给对应id的单元格
                $.each(arr, function (key, val) {
                    //根据字符串得到字符串变量，使用eval函数 acode="hq_str_gb_bidu"  访问eval(acode) 等价于访问变量  hq_str_gb_bidu
                    //对应指定id的得到其选择器,aid="#abc" $(aid) 等价于 $("#abc")
                    astock = val.split(",")[0];
                    acode = "hq_str_gb_" + astock;
                    atitle = eval(acode).split(",")[0];
                    $("#" + astock + "rate").text(eval(acode).split(",")[2] + "%");
                    $("#" + astock + "range").text(eval(acode).split(",")[9] + "-" + eval(acode).split(",")[8]);
                    if ((eval(acode).split(",")[2]) > 0) {
                        console.log("red");
                        $("#" + astock + "rate").css('color', 'green');
                    } else {
                        $("#" + astock + "rate").css('color', 'red');
                    }
                    $("#" + astock).text(eval(acode).split(",")[1]);//美股和A股的接口不一样，美股的是[1],A股是[3]，具体自己调试看各个字段内容含义
                    $("#" + astock + "link").attr("title", atitle);
                });

            });       
        }

        //根据股票数字，动态创建内容表格
        function inittable()
        {
            var astock = "";
            var buy1 = "";
            var sell1 = "";
            var sell2 = "";
            var linkurl = "http://stock.finance.sina.com.cn/usstock/quotes/";
            $.each(arr, function (key, val) {
                atock = val.split(",")[0];
                buy1 = val.split(",")[1];
                sell1 = val.split(",")[2];
                sell2 = val.split(",")[3];
                var alist = '<tr><td  class="code"><a class="tip" target="_new" href="' + linkurl + atock.toUpperCase() + '.html" id="' + atock + 'link">' + atock.toUpperCase() + '</a></td><td id="' + atock + '"></td><td id="' + atock + 'rate"></td><td>' + buy1 + '</td><td>' + sell1 + '</td><td>' + sell2 + '</td><td id="' + atock + 'range"></td></tr>';
                _webInfPath = _webInfPath + 'gb_' + atock + ',';
                $("#customers").append(alist);
            });

        }

    </script>

</html>
